<template>
    <div class="container">
        <Grid :columnNum="5" :clickable="true" :border="false" :gutter="10">
            <GridItem v-for="item in groupData" :key="item.id" class="grid-item" @click="showAdd(item)">
                <template #icon>
                   <Image :src="prefix+item.iconUrl" class="img-avatar" radius="20%"></Image>
                </template>
                <template #text>
                   <span class="p-nickname">{{ item.nickname }}</span>
                </template>
            </GridItem>
        </Grid>
        <Popup v-model:show="showPopup" closeable style="width: 80%;">
            <div style="padding: 10px;">
                <h3 class="h3-box">添加好友申请</h3>
                <Form >
                    <Field v-model="addInfo.nickname" label="添加昵称" label-class="label-title" type="text" maxlength="10"
                        placeholder="请输入备注昵称" show-word-limit :rules="[{ required: true, message: '备注昵称不能为空' }]" />
                    <Field v-model="addInfo.sayHello" rows="2" autosize label="添加留言" label-class="label-title1" type="textarea" maxlength="20"
                        placeholder="请输入添加申请留言" show-word-limit :rules="[{ required: true, message: '添加申请留言不能为空' }]" />
                    <div style="margin: 16px;">
                        <Button round block type="primary" @click="sumbitAdd" size="small">
                            确 认
                        </Button>
                    </div>
                </Form>
            </div>
        </Popup>
    </div>
</template>
<script setup name="School">
import { Swipe, SwipeItem, Grid, GridItem, Image, Dialog,Popup,Form,Field,Button} from 'vant';
import { getOssPrefix } from '@/v-api/properties';
import { ref,reactive } from 'vue';
import { addFriend } from '@/v-api/addressbook/person';
const prefix = getOssPrefix();
const tempAddId=ref(null);
const showPopup = ref(false);
const props = defineProps({
    groupData: {
        type: Array,
        default: () => [],
    },
});
const addInfo = reactive({
    userId: null,
    nickname: '',
    sayHello: ''
});
const showAdd=(item)=>{
   addInfo.userId=item.id;
    console.log(item);
    Dialog.confirm({
        title:'添加好友',
        message: `添加好友：${item.nickname}`,
        showCancelButton: true,
        cancelButtonText: '取消',
    }).then(() => {
       showPopup.value=true;
    }).catch(() => {
        // on cancel
    });
}
const sumbitAdd=()=>{
   addFriend(addInfo);
   showPopup.value=false;
}
</script>
<style scoped>
.container{
    width: fit-content;
    margin-top: 5%;
    margin-left: 3%;
    margin-right: 3%;
    align-items: center;
    justify-content: center;
}
.grid-item {
    display: flex;
    flex-direction: column;
    width: 55px;
    height: 98px;
    padding: 0; /* Add padding to control distance */
    margin: 0px;
    box-sizing: border-box;
}
.avatar-div{
    background-color: #d1d1d1;
    text-align: center;
    border-radius: 20%;
    width: 40px;
    height: fit-content;
}
.img-avatar{
    width: 48px;
    height: 48px;
    border-radius: 20%;

}
.p-nickname{
    font-size: 13px;
    color: #000;
    text-align: center;
    height: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 45px;
    margin-top: -5px;
}
.h3-box {
    font-size: 15px;
    color: #000;
    margin-left: 2.5rem;
}
</style>